
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont">&#xf0023;</i>
                    <div class="name">上传</div>
                    <div class="code">&amp;#xf0023;</div>
                    <div class="fontclass">.shangchuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0024;</i>
                    <div class="name">上传</div>
                    <div class="code">&amp;#xf0024;</div>
                    <div class="fontclass">.shangchuan1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0025;</i>
                    <div class="name">列表</div>
                    <div class="code">&amp;#xf0025;</div>
                    <div class="fontclass">.liebiao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0026;</i>
                    <div class="name">发送</div>
                    <div class="code">&amp;#xf0026;</div>
                    <div class="fontclass">.fasong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0022;</i>
                    <div class="name">编辑</div>
                    <div class="code">&amp;#xf0022;</div>
                    <div class="fontclass">.bianji</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0030;</i>
                    <div class="name">消费者保障</div>
                    <div class="code">&amp;#xf0030;</div>
                    <div class="fontclass">.xiaofeizhebaozhang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0031;</i>
                    <div class="name">新手上路</div>
                    <div class="code">&amp;#xf0031;</div>
                    <div class="fontclass">.xinshoushanglu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0034;</i>
                    <div class="name">其他</div>
                    <div class="code">&amp;#xf0034;</div>
                    <div class="fontclass">.qita</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0036;</i>
                    <div class="name">音乐</div>
                    <div class="code">&amp;#xf0036;</div>
                    <div class="fontclass">.yinle</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0037;</i>
                    <div class="name">电子书</div>
                    <div class="code">&amp;#xf0037;</div>
                    <div class="fontclass">.dianzishu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf003f;</i>
                    <div class="name">话费</div>
                    <div class="code">&amp;#xf003f;</div>
                    <div class="fontclass">.huafei</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0042;</i>
                    <div class="name">文章</div>
                    <div class="code">&amp;#xf0042;</div>
                    <div class="fontclass">.wenzhang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0044;</i>
                    <div class="name">图片</div>
                    <div class="code">&amp;#xf0044;</div>
                    <div class="fontclass">.tupian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0045;</i>
                    <div class="name">宝贝</div>
                    <div class="code">&amp;#xf0045;</div>
                    <div class="fontclass">.baobei</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0048;</i>
                    <div class="name">女人</div>
                    <div class="code">&amp;#xf0048;</div>
                    <div class="fontclass">.nvren</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf004f;</i>
                    <div class="name">间隔符号</div>
                    <div class="code">&amp;#xf004f;</div>
                    <div class="fontclass">.jiangefuhao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0051;</i>
                    <div class="name">扬声器</div>
                    <div class="code">&amp;#xf0051;</div>
                    <div class="fontclass">.yangshengqi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0060;</i>
                    <div class="name">标签</div>
                    <div class="code">&amp;#xf0060;</div>
                    <div class="fontclass">.biaoqian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0063;</i>
                    <div class="name">日历</div>
                    <div class="code">&amp;#xf0063;</div>
                    <div class="fontclass">.rili</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0064;</i>
                    <div class="name">音乐</div>
                    <div class="code">&amp;#xf0064;</div>
                    <div class="fontclass">.yinle1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0066;</i>
                    <div class="name">对话框</div>
                    <div class="code">&amp;#xf0066;</div>
                    <div class="fontclass">.duihuakuang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0069;</i>
                    <div class="name">可爱</div>
                    <div class="code">&amp;#xf0069;</div>
                    <div class="fontclass">.keai</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf013c;</i>
                    <div class="name">赞扬</div>
                    <div class="code">&amp;#xf013c;</div>
                    <div class="fontclass">.zanyang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf013d;</i>
                    <div class="name">批评</div>
                    <div class="code">&amp;#xf013d;</div>
                    <div class="fontclass">.piping</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf013e;</i>
                    <div class="name">设置</div>
                    <div class="code">&amp;#xf013e;</div>
                    <div class="fontclass">.shezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf013f;</i>
                    <div class="name">删除</div>
                    <div class="code">&amp;#xf013f;</div>
                    <div class="fontclass">.shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0141;</i>
                    <div class="name">其它</div>
                    <div class="code">&amp;#xf0141;</div>
                    <div class="fontclass">.qita1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0142;</i>
                    <div class="name">信息</div>
                    <div class="code">&amp;#xf0142;</div>
                    <div class="fontclass">.xinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0143;</i>
                    <div class="name">帮助</div>
                    <div class="code">&amp;#xf0143;</div>
                    <div class="fontclass">.bangzhu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0144;</i>
                    <div class="name">收藏</div>
                    <div class="code">&amp;#xf0144;</div>
                    <div class="fontclass">.shoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0145;</i>
                    <div class="name">喜爱</div>
                    <div class="code">&amp;#xf0145;</div>
                    <div class="fontclass">.xiai</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0146;</i>
                    <div class="name">小助手</div>
                    <div class="code">&amp;#xf0146;</div>
                    <div class="fontclass">.xiaozhushou</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf014a;</i>
                    <div class="name">位置</div>
                    <div class="code">&amp;#xf014a;</div>
                    <div class="fontclass">.weizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf014b;</i>
                    <div class="name">好友</div>
                    <div class="code">&amp;#xf014b;</div>
                    <div class="fontclass">.haoyou</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf014c;</i>
                    <div class="name">查找用户</div>
                    <div class="code">&amp;#xf014c;</div>
                    <div class="fontclass">.chazhaoyonghu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf014d;</i>
                    <div class="name">添加用户</div>
                    <div class="code">&amp;#xf014d;</div>
                    <div class="fontclass">.tianjiayonghu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf014f;</i>
                    <div class="name">编辑</div>
                    <div class="code">&amp;#xf014f;</div>
                    <div class="fontclass">.bianji1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0150;</i>
                    <div class="name">人民币</div>
                    <div class="code">&amp;#xf0150;</div>
                    <div class="fontclass">.renminbi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0152;</i>
                    <div class="name">标签</div>
                    <div class="code">&amp;#xf0152;</div>
                    <div class="fontclass">.biaoqian1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0153;</i>
                    <div class="name">减</div>
                    <div class="code">&amp;#xf0153;</div>
                    <div class="fontclass">.jian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0154;</i>
                    <div class="name">加</div>
                    <div class="code">&amp;#xf0154;</div>
                    <div class="fontclass">.jia</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0155;</i>
                    <div class="name">错误</div>
                    <div class="code">&amp;#xf0155;</div>
                    <div class="fontclass">.cuowu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0156;</i>
                    <div class="name">正确</div>
                    <div class="code">&amp;#xf0156;</div>
                    <div class="fontclass">.zhengque</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0159;</i>
                    <div class="name">小缩略图</div>
                    <div class="code">&amp;#xf0159;</div>
                    <div class="fontclass">.xiaosuolvetu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf015c;</i>
                    <div class="name">刷新</div>
                    <div class="code">&amp;#xf015c;</div>
                    <div class="fontclass">.shuaxin</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf015d;</i>
                    <div class="name">单图排列</div>
                    <div class="code">&amp;#xf015d;</div>
                    <div class="fontclass">.dantupailie</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf015e;</i>
                    <div class="name">大列表</div>
                    <div class="code">&amp;#xf015e;</div>
                    <div class="fontclass">.daliebiao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf015f;</i>
                    <div class="name">大缩略图列表</div>
                    <div class="code">&amp;#xf015f;</div>
                    <div class="fontclass">.dasuolvetuliebiao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0164;</i>
                    <div class="name">过滤</div>
                    <div class="code">&amp;#xf0164;</div>
                    <div class="fontclass">.guolv</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf016d;</i>
                    <div class="name">向右</div>
                    <div class="code">&amp;#xf016d;</div>
                    <div class="fontclass">.xiangyou</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf016e;</i>
                    <div class="name">向左</div>
                    <div class="code">&amp;#xf016e;</div>
                    <div class="fontclass">.xiangzuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf016f;</i>
                    <div class="name">向上</div>
                    <div class="code">&amp;#xf016f;</div>
                    <div class="fontclass">.xiangshang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0170;</i>
                    <div class="name">向下</div>
                    <div class="code">&amp;#xf0170;</div>
                    <div class="fontclass">.xiangxia</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf019a;</i>
                    <div class="name">微距</div>
                    <div class="code">&amp;#xf019a;</div>
                    <div class="fontclass">.weiju</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf019e;</i>
                    <div class="name">风景</div>
                    <div class="code">&amp;#xf019e;</div>
                    <div class="fontclass">.fengjing</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf01ec;</i>
                    <div class="name">选择</div>
                    <div class="code">&amp;#xf01ec;</div>
                    <div class="fontclass">.xuanze</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0138;</i>
                    <div class="name">邮件</div>
                    <div class="code">&amp;#xf0138;</div>
                    <div class="fontclass">.youjian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0194;</i>
                    <div class="name">打开信息</div>
                    <div class="code">&amp;#xf0194;</div>
                    <div class="fontclass">.dakaixinxi</div>
                </li>
            
        </ul>


        <div class="helps">
            第一步：使用font-face声明字体
            <pre>
@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用iconfont的样式
            <pre>
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
&lt;i class="iconfont"&gt;&amp;#x33;&lt;/i&gt;
</pre>
        </div>

    </div>
</body>
</html>
